<!--
* @Author: 张昊
* @Date: 2021-12-22 16:44:41
* @LastEditors: 张昊
* @Description: 详情:详情信息
-->

<template>
	<view class="">
		<view class="units" v-if="showtitle">
			<!-- 点击之前 显示省略号 -->
			<view class="unit" v-if="!showAll">
				<text class="unit-title">{{ perform.title }}</text>
				<text class="unit-text" :style="{ color: perform.color ? perform.color : color }" @click="showToast(perform)">
					{{ perform.text  || ' ' }}
				</text>
				<u-icon @click="showToast(perform)" v-if="perform.phone" name="phone" color="#2979ff" size="18"></u-icon>
				<!-- width: width - (perform.width || 0) + 'rem' -->
			</view>
			<!-- 右侧的功能 -->
			<view class="fun"><txt-fun ref="fun" v-for="(it, i) in perform.fun" :key="i" :it="it" @click.native="click(it, i)"></txt-fun></view>
		</view>
		<!-- 四大通用Fun弹窗 -->
		<slot />
		<u-modal showCancelButton :show="showFile" :title="fileName" :content="content" cancelText="取消下载" confirmText="进入后台下载" @cancel="cancel" @confirm="confirm">
			<view class="modal" v-if="showFile">
				<view class="title">下载中:</view>
				<view style="width: 400rpx;height: 24rpx;"><u-line-progress :percentage="content" activeColor="#4a8fff"></u-line-progress></view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	props: {
		perform: {
			type: Object
		},
		dataItem: {
			type: Object
		}
	},
	data() {
		return {
			color: '',
			width: 0,
			// 显示省略号数据
			showAll: false,
			// 动画显示控制
			showTransition: false,
			// 当没有功能时,显示操作
			showtitle: true,
			// 正在下载的文件
			fileName: '',
			// // 文件下载弹窗
			content: 0,
			// // 文件下载控制
			showFile: false,
			downloadTask: null
		};
	},
	watch: {
		perform: {
			handler(newval) {
				if (!newval.text && ((newval.fun && newval.fun.length === 0) || !newval.fun)) {
					this.showtitle = false;
				} else {
					this.showtitle = true;
				}
			},
			immediate: true
		}
	},
	methods: {
		fun() {
			// 文本 颜色判断
			switch (this.perform.text) {
				case '启用/转正':
				case '申请成功':
				case '审批完成':
				case '审批通过':
				case '开':
				case '审核通过':
				case '自用':
				case '正常':
				case '已通过':
				case '开阀':
				case '是':
				case '已完成':
				
					this.color = '#00B900';
					break;
				case '审核中':
				case '采购中':
				case '试用':
				case '申请中':
				case '审批中':
				case '他用':
				case '暂存中':
				case '执行中':
				case '已接单':
				case '未申请':
					this.color = '#FAB600';
					break;
				case '异常':
				case '停用/离职':
				case '驳回':
				case '关':
				case '已撤回':
				case '审批驳回':
				case '审批撤回':
				case '审批拒绝':
				case '结束':
				case '关阀':
				case '否':
				case '已拒绝':
				case '停止':
				case '待处理':
					this.color = '#F11821';
					break;
			}
			if (this.perform && this.perform.text && this.perform.text.length && this.perform.text.length > 6) {
				if (this.perform.text.substring(this.perform.text.length - 4, this.perform.text.length) === '点击下载') {
					this.color = '#0086FF';
				}
			}
			// 没有功能 默认宽度
			if (!this.perform.fun || (this.perform.fun && this.perform.fun.length === 0)) {
				switch (uni.getStorageSync('root_font_size').split('px')[0] * 24) {
					case 10:
						this.width = 650;
						break;
					case 11:
						this.width = 600;
						break;
					case 12:
						this.width = 540;
						break;
					case 13:
						this.width = 480;
						break;
					case 14:
						this.width = 450;
						break;
					case 15:
						this.width = 400;
						break;
					case 16:
						this.width = 380;
						break;
					case 17:
						this.width = 350;
						break;
					case 18:
						this.width = 310;
						break;
				}
				this.width = this.width - 70;
			}
		},
		showToast(params) {
			// this.fileName = '正在下载:' + params.text.substring(0, params.text.length - 5);

			// 下载功能
			if (params.file) {
				this.content = 0;
				this.showFile = true;
				this.downloadTask = wx.downloadFile({
					url: params.file, //仅为示例，并非真实的资源
					success: res => {
						// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
						if (res.statusCode === 200) {
							uni.$u.toast('保存成功');
							this.showFile = false;
							wx.playVoice({
								filePath: res.tempFilePath
							});
						}
					}
				});
				this.downloadTask.onProgressUpdate(res => {
					this.content = res.progress;
				});
			}
			if (params.phone) {
				uni.makePhoneCall({
					phoneNumber: params.phone
				});
			}
		},
		// 点击取消
		cancel() {
			uni.$u.toast('已停止下载');
			this.showFile = false;
			this.downloadTask.abort();
		},
		// 点击确认
		confirm() {
			uni.$u.toast('已进入后台下载');
			this.showFile = false;
		},
		click(it, i) {
			uni.$emit('UNIclickIndex', {
				it,
				i,
				perform: this.perform
			});
			// 点击的（编辑，删除，缴纳）功能，发送全局事件
			if (it.function && it.function) {
				uni.$emit(it.function, this.dataItem);
			}
		}
	},
	mounted() {
		this.fun();
		this.showTransition = true;
	}
};
</script>

<style scoped lang="scss">
.units {
	display: flex;
	justify-content: space-between;
	padding-top: 28rem;

	.fun {
		display: flex;
		margin-top: 2 * 2rpx;
	}
}

.unit {
	display: flex;
	align-items: center;
	// align-items: flex-start;
	font-size: 28rem;
	color: #333333;
	padding: 1px;
	// height: 42rem;

	.unit-title {
		display: inline-block;
		width: 60 * 2rem;
		height: 34rem;
		text-align: justify;
		overflow: hidden;
		font-weight: 600;
		color: #333333;
	}

	.unit-title::after {
		content: '';
		display: inline-block;
		width: 100%;
	}
	.unit-text::before {
		content: ':';
		font-weight: 600;
		color: #333333;
		padding-right: 14rem;
		display: inline-block;
	}
	.unit-text {
		flex: 1;
		// height: 34rem;
		// line-height: 38rem;
		display: inline-block;
		padding-left: 14rpx;
		// work-break:break-all;
		// width: 350rem;
		// white-space: nowrap;
		// /*设置不折行*/
		// text-overflow: ellipsis;
		// /*这就是省略号喽*/
		// overflow: hidden;
		/*设置超过的隐藏*/
	}
}

.modal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		line-height: 24rpx;
	}
}
</style>
